import React ,{ Component }  from 'react'

import {Table as AntTable,Tabs,Input,Icon,Modal,message} from 'antd'

import Frommodal from './modal'

import './info.css'

import api from './ajaxaction'


const confirm = Modal.confirm;

const TabPane = Tabs.TabPane;

const Search = Input.Search;

class Directional extends Component{

  constructor(props){
    super(props);
    this.state={
      visible:false,
      data:[],
      pageNum:1,
      pagesize:2,
      orderBy:'id',
      website:'',
      seachValue:'',
      total:0,
      isShow:true,
      upWebsite:'',
      updomain:'',
      handType:0,
      id:''

    }
    this.showModal=this.showModal.bind(this)
    this.handleCancel=this.handleCancel.bind(this)
    this.handleSubmit=this.handleSubmit.bind(this)
    this.onPageChangeHandler=this.onPageChangeHandler.bind(this)
  }
  componentDidMount(){
    this.rendendata()
  }
  //数据渲染
  rendendata(){
  api.rendata('/vrv-monitor-platform-web/whitelist/queryByWebsite',this.state.pageNum,this.state.pagesize,this.state
  .orderBy,this.state.website).then(res=>{
    if(res.data.success){
      let data= Object.assign([],res.data.data)
      data.map((d,index)=>(
        d.key=(this.state.pagesize*(this.state.pageNum-1))+1+index
      ))
      this.setState({
        data:res.data.data,
        total:res.data.total
      })
    }
  })
  }
  //定向检测删除
  handdelete(id){
    let _this=this
    confirm({
      title: '确认删除此项',
      content:'此操作将永久删除该文件, 是否继续?',
      onOk() {
      api.deledomain('/vrv-monitor-platform-web/whitelist/delete',id).then(res=>{
        if(res.data.success){
          message.success('删除成功');
          _this.rendendata()
          
        }
      })  
      },
      onCancel() {
        return 
      },
    })
  }
    //定向检测x修改
    handshow(id,website,domain){
      this.setState({
        visible:true,
        upWebsite:website,
        updomain:domain,
        id:id,
        handType:1
      })
    }
    // handdupdate(id,website,domain){
    //   api.domainEdit('/vrv-monitor-platform-web/whitelist/update',id,website,domain).thne(res=>{
    //     if(res.data.success){
    //       this.rendendata();
    //       message.success('修改成功');
    //     }
    //   })
    //   this.setState({
    //     visible:false
    //   })
  
    // }
  showModal(){
    this.setState({
      visible:true,
      handType:0
    })
  }

  //是否显示
  onShow(){
    this.setState({
      isShow:false
    })
  }
  //定向检测添加or修改
  handleOk(values){
    if(this.state.handType===0){
      api.addsorce('/vrv-monitor-platform-web/whitelist/insert',values.name,values.domain).then(res=>{
        if(res.data.success){
          this.rendendata()
          message.success('添加成功');
        }else{
          message.error(res.data.message);
        }
      })
    }else if(this.state.handType===1){
      console.log(this.state.id)
      api.updatesorce('/vrv-monitor-platform-web/whitelist/update',this.state.id,values.name,values.domain).then(res=>{
        if(res.data.success){
          this.rendendata()
          message.success('修改成功');
        }else{
          message.error(res.data.message);
        }
      })
    }

    this.setState({
      visible:false
    })
  }
  //取消
  handleCancel(){
    this.setState({
      visible:false
    })
  }

  handleSubmit(e){
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  //搜索
  onSearch(value){
      api.searchdaomain('/vrv-monitor-platform-web/whitelist/queryByWebsite',this.state.pageNum,this.state.pagesize,this.state
      .orderBy,value).then(res=>{
        if(res.data.success){
          let data=res.data.data;
          data.map((item,index)=>(
            item.key=index+1
          ))
          this.setState({
            data:res.data.data,
          })
        }else{
          message.error(res.data.message);
        }
      })
    }
  async onPageChangeHandler(currentPage){
    await this.setState({
      pageNum:currentPage,
    });
    await this.rendendata()
  }
  render(){
    const columns = [{
      title: '序号',
      dataIndex: 'key',
      key: 'key',
    }, {
      title: '名称',
      dataIndex: 'website',
      key: 'name',
    }, {
      title: '域名',
      dataIndex: 'domain',
      key: 'domain',
      render: text => <a href="#">{text}</a>,
    }, 
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
    },{
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span className="dis-ico">
          <a href="#"><Icon type="eye-o" onClick={()=>this.handshow(record.id,record.website,record.domain)}></Icon></a>
          <a href="#"><Icon type="delete" onClick={()=>this.handdelete(record.id)}></Icon></a>
        </span>
      ),
    },];
    //搜索
    return(
      <div style={{backgroundColor:'#ffffff'}}>
        <div className={this.state.isShow ? ' di-msg di-show':' di-msg di-hide'}>
        <Icon type="sound" style={{color:'#ff7676'}}/>可对指定网站、微博账号、贴吧论坛进行监测
        <Icon type="close" onClick={()=>this.onShow()}></Icon></div>
        <div className="dis-conte">
        <Tabs defaultActiveKey="1">
          <TabPane tab="定向信息源设置" key="1">
          <div className="dis-search">
          <Search placeholder="请输入数据源名称" enterButton onSearch={(value)=>this.onSearch(value) }style={{ width: 260 }}/>
          <span className="ico-img"><Icon type="plus-circle" style={{fontSize:'45px',color:'#007be2',background:'#ffffff'}} onClick={this.showModal}></Icon></span>
          </div> 
          <div>
          
            <AntTable columns={columns} dataSource={this.state.data} 
              pagination={{
              defaultPageSize:this.state.pagesize,
              total:this.state.total,
              current:this.state.pageNum,
              onChange:this.onPageChangeHandler
            }}></AntTable>
            
          </div> 
          </TabPane>
          <TabPane tab="定向信息省份设置" key="2">
            <div>功能暂未开通</div>
          </TabPane>
        </Tabs>
        </div>
        <Frommodal visible={this.state.visible}   click={(values)=>{this.handleOk(values)}} Cancel={()=>this.handleCancel()} upValue={this.state.upWebsite} upDomain={this.state.updomain}></Frommodal>
       
      </div>
    )
  }
}

export default Directional